<template>
	<view class="content">
		<view class="chart">
			<text class="a">数据展示</text>
		</view>
		<text class="text">Column Chart</text>
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartsDataColumn" />
		</view>
		<text class="text">Bar Chart</text>
		<view class="charts-box">
			<qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataBar" />
		</view>
		<text class="text">Line Chart</text>
		<view class="charts-box">
			<qiun-data-charts type="line" :chartData="chartsDataLine" />
		</view>
		<text class="text">Pie Chart</text>
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="chartsDataPie" :echartsH5="true" :echartsApp="true" />
		</view>
		<view class="chart">
			<text class="a">视频展示</text>
		</view>
		<view class="page">
			<video id="demoVideo" :controls="false" :enable-progress-gesture="false"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
			</video>
		</view>
		<view class="page">
			<video id="demoVideo" :controls="false" :enable-progress-gesture="false"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
			</video>
		</view>
	</view>
</template>

<script>
	import demodata from '@/data/demodata.json';
	// import mapdata from '@/mockdata/mapdata.json'

	export default {
		data() {
			return {
				chartsDataColumn: {},
				chartsDataBar: {},
				chartsDataLine: {},
				chartsDataPie: {},
			}
		},
		onReady() {
			//模拟从服务器获取数据
			this.getServerData()
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					this.chartsDataColumn = JSON.parse(JSON.stringify(demodata.Column))
					this.chartsDataBar = JSON.parse(JSON.stringify(demodata.Bar))
					this.chartsDataLine = JSON.parse(JSON.stringify(demodata.Line))
					this.chartsDataPie = JSON.parse(JSON.stringify(demodata.PieA))
				}, 1500);
			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.chart {
		width: 300rpx;
		height: 65rpx;
		background: #fcdfd9;
		border-radius: 30px;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.a {
		line-height: 1.8;
		padding-left: 40px;
		font-size: 35rpx;
		font-weight: 540;
	}

	.text {
		line-height: 3;
		margin-top: 20rpx;
		margin-left: 70rpx;
		font-weight: 600;
	}

	.page {
		margin-top: 40rpx;
		margin-left: 70rpx;
	}
</style>
